<!--
  -    工单处理管理
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <basic-container>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-left:10px;">
        <!--待处理-->
        <el-tab-pane
          label="未完成"
          name="0">
        </el-tab-pane>
        <el-tab-pane
          label="已完成"
          name="1">
        </el-tab-pane>
      </el-tabs>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @search-reset="resetChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-del="rowDel">
        <template slot="search" slot-scope="{row,size}">
          <el-col :span="6">
            <el-form-item
              label="报修日期"
              label-width="100px">
              <el-date-picker
                v-model="createDates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </template>
        <template slot="searchMenu">
          <el-button class="filter-item" icon="el-icon-download" @click="exportFile()">导出</el-button>
        </template>
        <template slot="menuLeft" slot-scope="scope">
          <el-button v-if="information_news_add"
                     class="filter-item"
                     type="primary"
                     icon="el-icon-plus"
                     @click="addOrUpdateHandle('add','')">新增</el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button v-if="information_news_get" type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button v-if="scope.row.orderIs" type="text" @click="receiveOrder(scope.row)">接单</el-button>
          <el-button v-if="scope.row.finishIs" type="text" @click="showFinishWorkOrder(scope.row)">完成</el-button>
        </template>
      </avue-crud>
      <table-forms v-if="viewVisible" ref="viewBtn" @refreshDataList="refreshDataList"></table-forms>
    </basic-container>
    <FinishWorkOrder :visible="finishWorkOrderVisible"
                     :id="id"
                     :serviceFee="serviceFee"
                     @on-close="finishWorkOrderVisible=false"
                     @on-success="finishWorkOrderSuccess"></FinishWorkOrder>
  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj, receiveWorkoOrder, doneworkorder, detail } from '@/api/market/repair/order/person'
import { tableOption } from '@/const/crud/market/repair/order/person'
import TableForms from './FormModify'
import { mapGetters } from 'vuex'
import { ExportFile } from '@/api/common'
import FinishWorkOrder from "@/views/market/repair/order/FinishWorkOrder";
export default {
  name: 'order',
  components: {FinishWorkOrder, "table-forms": TableForms },
  data () {
    return {
      viewVisible: false,
      activeName: '0',
      searchForm: {},
      tableData: [],
      addOrUpdateVisible: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      information_news_get: true,
      information_news_add: false,
      createDates: [],
      id: 0,
      serviceFee: 0,
      finishWorkOrderVisible: false
    }
  },
  created () {
  },
  computed: {
    ...mapGetters(['elements', 'permissions'])
  },
  methods: {
    exportFile () {
      if (this.createDates.length > 0) {
        this.searchForm.startDate = this.createDates[0]
        this.searchForm.endDate = this.createDates[1]
      }
      this.searchForm.searchFinished= this.activeName != '0'
      this.searchForm.isServiceOrder = true
      ExportFile("/repair/cscustomerservice/outputService", this.searchForm)
    },
    handleClick () {
      this.getList(this.page)
    },
    refreshDataList () {
      this.getList(this.page)
    },
    getList (page, params) {
      this.tableLoading = true
      if (this.createDates.length > 0) {
        this.searchForm.startDate = this.createDates[0]
        this.searchForm.endDate = this.createDates[1]
      }

      this.searchForm.searchFinished= this.activeName != '0'
      this.searchForm.isServiceOrder = true

      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除此条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    // 新增、修改
    addOrUpdateHandle (isEdit, id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(isEdit, id)
      })
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange (current) {
      this.page.currentPage = current
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    resetChange () {
      this.createDates = []
      this.searchForm.startDate = ''
      this.searchForm.endDate = ''
    },
    refreshChange () {
      this.getList(this.page)
    },
    receiveOrder (row) {
      this.$confirm('是否要接单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        receiveWorkoOrder({ id: row.id }).then((data) => {
          this.getList(this.page)
          this.$message.success("接单成功")
        })
      }).catch(() => {

      })
    },
    handleView (row) {
      this.viewVisible = true
      this.$nextTick(() => {
        this.$refs.viewBtn.init('view', row.id, row.orderIs)
      })
    },
    showFinishWorkOrder(row) {
      this.finishWorkOrderVisible = true
      this.serviceFee = row.serviceFee
      this.id = row.id
    },
    finishWorkOrderSuccess() {
      this.finishWorkOrderVisible = false
      this.getList(this.page)
    }
  }
}
</script>
